<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .red{
        color: red
      }.blue{
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="test">
      你好，{{content}}，{{description}}<br />
      <span>{{description}}</span></br>
      <input v-model="obj.x" v-on:keydown="enter" />{{obj.x}}</br>
      <ul>
        <li v-for="(key) in list">
          姓名：{{key.name}}，年龄：{{key.sex}}
        </li>
      </ul>
      <img v-bind:src="imgSrc" alt="">
      <div v-bind:class="haha">我的天啊</div>
      <div v-bind:class="{red: obj.x < 2, blue: obj.y > 2}">我的地啊</div>
    </div>
    <script type="module">
      import Due from "./core/index.js";
      //let test = new Due()    // 这样写，直接在页面上写使用test将不会访问到new Due()，因为这是模块化的script标签（type="module"）
      window.test = new Due({
        // 全局使用test挂载new Due实例
        el: "test",
        data: {
          content: "panda",
          description: "panda say hello",
          obj: {
            x: 1,
            y: 3,
          },
          list: [
            { name: "lyc", sex: "male"},
            { name: "vdr", sex: "female"},
          ],
          imgSrc: "./a.png",
          haha: 'red'
        },
        methods:{
          enter(){
            console.log(this.obj.x)
          }
        }
      });
    </script>
  </body>
</html>
